<template>
	<div class="mine-content" style="margin-top: 0;">
		<Header></Header>
		<ul class="weui-list">
			<li style="margin-bottom: 0.45rem">
				<i class="orderNum">{{!orderNum?0:orderNum}}</i>
				<router-link to='/orderList'>
					<img src="../../images/index1.png" alt=""><br />
					<span>订单管理</span>
				</router-link>
			</li>
			<li style="margin-bottom: 0.45rem">
				<router-link to='/materialList'>
					<img src="../../images/index2.png" alt=""><br />
					<span> 提交议价单</span>
				</router-link>
			</li>
			<li>
				<router-link to='/mine'>
					<i class="waitNum">{{!waitNum?0:waitNum}}</i>
					<img src="../../images/index3.png" alt=""><br />
					<span>待办中心</span>
				</router-link>
			</li>
			<li>
				<router-link to='/applyPay'>
					<i class="applyPay">{{!payNum?0:payNum}}</i>
					<img src="../../images/index4.png" alt=""><br />
					<span>申请付款</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	import Header from '../../components/common/header'
	import {
		getMineList,
		getPayList,
		getOrderList
	} from '../../config/api'
	import {
		getStore
	} from '../../config/mUtils'
	export default {
		data() {
			return {
				orderNum: '',
				waitNum: '',
				payNum: '',
				name: getStore('name'),
				companyType: getStore('scopeBusinessNames')
			}
		},
		mounted() {
			let SupplierId = getStore('SupplierId')
			let username = getStore('username')
			//获取订单数量接口
			getMineList(SupplierId, username).then(res => {
				this.waitNum = res.content.length
			})
			//获取订单数量
			getPayList(SupplierId).then(res => {
				this.payNum = res.content.length
			})
			//获取待办数量
			getOrderList(SupplierId).then(res => {
				this.orderNum = res.content.totalCount
			})
		},
		components: {
			Header
		},
	}
</script>

<style scoped="scoped" lang="less">
	@import '../../style/home';

	.weui-list {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 5rem;

		li {
			width: 47%;
			height: 7.5rem;
			text-align: center;
			background: #fff;
			float: left;
			-webkit-box-shadow: 0 0 0.1rem 0.05rem #b4b4b4;
			-moz-box-shadow: 0 0 0.1rem 0.05rem #b4b4b4;
			box-shadow: 0 0 0.1rem 0.05rem #b4b4b4;
			position: relative;
			box-sizing: border-box;
			margin: 1%;

			i {
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
				background: #f65555;
				position: absolute;
				right: 0.4rem;
				top: 0.4rem;
				font-size: 0.75rem;
				color: #fff;
				text-align: center;
				line-height: 1rem;
				font-style: normal;
			}

			img {
				width: 2.1rem;
				height: 2.2rem;
				margin-top: 1.8rem;
			}

			a {
				color: #666;
				width: 100%;
				height: 100%;
				font-size: 0.85rem;
				display: inline-block;

				span {
					margin-top: 0.6rem;
					display: inline-block;
					color: #444;
				}
			}
		}
	}

	.mine-content {
		background: url('../../images/bgImage.png') no-repeat;
		background-size: 100% 100%
	}

	.mine-content .company-name {
		border-bottom: 0
	}

	.mine-content .company-name p:last-child {
		margin-bottom: 0
	}
</style>
